.edgesIgnoringSafeArea allows View to take up space above the Safe Area.
Otherwise maximally allowed space for the View would be till the Safe Area.
In most cases Parent View will try to increase its size to the point where it can fit content of its Child Views but not more.
By default it will increase in size until the Safe Area. Like in the case of .resizable Image.
But if you apply .edgesIgnoringSafeArea Modifier it will be allowed to take even more space beyond the Safe Area.
In the below example we have Image which is much larger ten the Root View.
Around it we create a Parent Frame View which tries to expand as much as possible to show as much Image as it can.
Syntax
.edgesIgnoringSafeArea(.all)
.edgesIgnoringSafeArea(.horizontal)
.edgesIgnoringSafeArea(.vertical)
.edgesIgnoringSafeArea(.top)
.edgesIgnoringSafeArea(.bottom)
.edgesIgnoringSafeArea(.leading)
.edgesIgnoringSafeArea(.trailing)
Example
struct ContentView: View {
var body: some View {
Image("Table")
.resizable()
.frame(maxWidth: .infinity, maxHeight: .infinity).border(Color.red, width:2)
.edgesIgnoringSafeArea(.horizontal)
}
}
Until the Safe Area Beyond the Safe Are in Horizontal direction